<template>
  <view
    class="wrap bd"
    :style="{ backgroundColor: current == 0 ? '#f8f8f8' : '#ffffff' }"
  >
    <image
      class="edit"
      src="../../../static/img/3e3b2db473784873887377acebd78fff.png"
      mode="widthFix"
      @click="edit"
      v-show="current == 0"
    ></image>
    <view style="width: 750rpx">
      <u-tabs
        :list="listinfo"
        :is-scroll="isScroll"
        :current="current"
        @change="change"
        active-color="#3F96B6"
        swiperWidth="750"
        bar-width="400rpx"
        bar-height="1"
        class="bd"
      ></u-tabs>
    </view>
    <view v-show="current == 0" class="dbox2">
      <view
        class="dbox"
        v-for="(item, index) in zj"
        :key="item.id"
        @click="click(index)"
      >
        <view class="swcard bd">
          <u-row gutter="16" class="swtop">
            <u-col span="8">
              <span class="bl">{{ item.createTime }}</span>
              <view class="bmain" v-show="item.tips == 'sml'">偏低</view>
              <view class="bmain b1" v-show="item.tips == 'hei'">偏高</view>
              <view class="bmain b2" v-show="item.tips == 'cer'">正常</view>
            </u-col>
            <u-col span="4">
              <view class="br u-font-sm" @click="showEdits(index)">
                <u-icon name="edit-pen" class="btns"></u-icon>
              </view>
            </u-col>
          </u-row>
          <u-row gutter="16" class="swdown">
            <u-col span="16">
              <view class="blnum"
                >餐前：{{ item.bloodSugerCq }}mmol/L&nbsp;&nbsp;餐后：{{
                  item.bloodSugerCh
                }}mmol/L</view
              >
            </u-col>
          </u-row>
        </view>
      </view>
      <u-popup v-model="showEdit" mode="center">
        <view class="iconbox">
          <view class="edits" @click="editinfo(idx)"
            >修改
            <u-icon name="edit-pen"></u-icon>
          </view>
          <view class="del" @click="del(idx)"
            >删除
            <u-icon name="minus-circle"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>
    <view class="card" v-show="current != 0 && chartshow">
      <view class="qiun">
        <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
          <view class="sli">
            <span><i class="le"></i>餐前</span>
            <span><i class="le rl"></i>餐后</span>
          </view>
        </view>
        <view class="qiun-charts">
          <canvas
            canvas-id="canvasLineA"
            id="canvasLineA"
            :style="{ width: idxpx + 'rpx' }"
            class="charts"
            @touchstart="touchLineA"
          ></canvas>
        </view>
        <ul class="jlu">
          <li>
            <p class="bt">最高血糖(餐前)</p>
            <p class="num zc">{{ parms.cqMax }}<span>mmol/L</span></p>
          </li>
          <li>
            <p class="bt">最低血糖(餐前)</p>
            <p class="num zc">{{ parms.cqMin }}<span>mmol/L</span></p>
          </li>
          <li>
            <p class="bt">最高血糖(餐后)</p>
            <p class="num">{{ parms.chMax }}<span>mmol/L</span></p>
          </li>
          <li>
            <p class="bt">最低血糖(餐后)</p>
            <p class="num">{{ parms.chMin }}<span>mmol/L</span></p>
          </li>
        </ul>
      </view>
    </view>
  </view>
</template>

<script>
import uCharts from "@/js_sdk/u-charts/u-charts/u-charts.js";
var _self;
var canvaLineA = null;
export default {
  data() {
    return {
      cWidth: "",
      cHeight: "",
      pixelRatio: 1,
      orderList: [], //接收数据
      listinfo: [
        {
          name: "记录列表",
        },
        {
          name: "曲线记录",
        },
      ],
      list: [],
      current: 0,
      disabled: false,
      btnWidth: 180,
      show: false,
      isScroll: false,
      options: [
        {
          text: "修改",
          style: {
            color: "#007aff",
            boxShadow: "-3px 0px 5px -2px #ededed",
          },
        },
      ],
      dataee: {
        categories: "",
        series: [
          {
            name: "餐前",
            data: "",
            color: "#007aff",
          },
          {
            name: "餐后",
            data: "",
            color: "#ffe02e",
          },
        ],
      },
      parms: {
        //图表下方的信息
        cqMax: "",
        cqMin: "",
        chMax: "",
        chMin: "",
      },
      showEdit: false, //弹出框状态
      idx: "", //存放点击下标
      idxpx: "", //图表的宽度
      chartshow: true,
    };
  },
  computed: {
    zj() {
      _self.list.forEach((item) => {
        if (item.bloodSugerCq < 3.92 || item.bloodSugerCh < 5.1) {
          item.tips = "sml"; //偏低
        } else if (
          3.92 < item.bloodSugerCq &&
          item.bloodSugerCq < 6.16 &&
          5.1 < item.bloodSugerCh &&
          item.bloodSugerCh < 7.0
        ) {
          item.tips = "cer"; //正常
        } else {
          item.tips = "hei"; //偏高
        }
      });
      return _self.list;
    },
  },
  onLoad() {
    _self = this;
    //console.log('这里请求数据');
    // this.cWidth = uni.upx2px(680);
    this.cHeight = uni.upx2px(500);
    this.getServerData();
    this.getlist();
  },
  onBackPress(e) {
    uni.switchTab({
      url: "/pages/home/home",
    });
    return true;
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    getlist() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/oldbooldInfo/getOldBoold", {
          booldType: 1,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            //console.log(res)
            if (typeof res.data.data === "undefined") {
              _self.list = [];
            } else {
              _self.list = res.data.data;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    showEdits(index) {
      //修改
      this.idx = index;
      //console.log(index)
      this.showEdit = true;
    },
    edit() {
      uni.navigateTo({
        url: "./xtadd",
        animationType: "pop-in",
        animationDuration: 200,
      });
    },
    del(v) {
      //删除
      let a = this.list[v].id;
      this.config
        .post("/oldbooldInfo/removeOldBooldSuger", {
          id: a,
        })
        .then((res) => {
          //console.log(res)
          if (res.data.code === 200) {
            this.showEdit = false;
            this.getlist();
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    editinfo(index) {
      //console.log(index)
      let sh = this.list[index].bloodSugerCq;
      let sd = this.list[index].bloodSugerCh;
      let xid = this.list[index].id;
      let times = this.list[index].createTime;
      uni.navigateTo({
        url:
          "./xtadd?cq=" + sh + "&ch=" + sd + "&datas=" + times + "&id=" + xid,
        animationType: "pop-in",
        animationDuration: 200,
      });
    },
    // tab栏切换
    change(index) {
      //console.log(index)
      this.current = index;
      this.isScroll = false;
      this.getServerData();
    },
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      });
    },
    edit() {
      uni.navigateTo({
        url: "./xtadd",
        animationType: "pop-in",
        animationDuration: 200,
      });
    },
    getServerData() {
      var _self = this;
      let LineA = {
        categories: [],
        series: [],
      };
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.get("/oldbooldInfo/getOldBloodXQx", {}).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          if (typeof res.data.data === "undefined") {
            this.chartshow = false;
            uni.showToast({
              title: "暂无数据",
              icon: "none",
            });
          } else {
            let datas = res.data.data;
            _self.dataee.categories = datas.categories;
            _self.dataee.series[0].data = datas.cqData;
            _self.dataee.series[1].data = datas.chData;
            _self.parms.cqMax = datas.cqMax;
            _self.parms.cqMin = datas.cqMin;
            _self.parms.chMax = datas.chMax;
            _self.parms.chMin = datas.chMin;
            //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
            LineA.categories = this.dataee.categories;
            LineA.series = this.dataee.series;
            let idx = "";
            switch (res.data.data.categories.length) {
              case 1:
                idx = res.data.data.categories.length * 45 * 15;
                break;
              case 2:
                idx = res.data.data.categories.length * 36 * 10;
                break;
              case 3:
                idx = res.data.data.categories.length * 45 * 5;
                break;
              case 4:
                idx = res.data.data.categories.length * 35 * 5;
                break;
              case 5:
                idx = res.data.data.categories.length * 28 * 5;
                break;
              default:
                idx = res.data.data.categories.length * 50 * 4;
            }
            this.cWidth = uni.upx2px(idx);
            this.idxpx = idx;
            _self.showLineA("canvasLineA", LineA);
          }
        } else {
          uni.showToast({
            title: "暂无数据",
            icon: "none",
          });
        }
      });
    },
    showLineA(canvasId, chartData) {
      canvaLineA = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: "line",
        fontSize: 11,
        legend: {
          show: false,
        },
        dataLabel: false,
        dataPointShape: true,
        background: "#FFFFFF",
        pixelRatio: _self.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        xAxis: {
          type: "grid",
          gridColor: "#ffffff",
          gridType: "dash",
          dashLength: 7,
        },
        yAxis: {
          data: [
            {
              title: "mmol/L",
              format: (val) => {
                return val.toFixed(2);
              },
            },
          ],
          showTitle: true,
          gridType: "dash",
          gridColor: "#ffffff",
          axisLineColor: "#ffffff",
          dashLength: 10,
          splitNumber: 4,
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          line: {
            type: "curve",
          },
          length: {
            position: "top",
          },
        },
      });
    },
    touchLineA(e) {
      canvaLineA.showToolTip(e, {
        format: function (item, category) {
          return category + " " + item.name + ":" + item.data;
        },
      });
    },
  },
};
</script>

<style scoped>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f8f8f8;
}

/* #endif */
</style>

<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  margin-bottom: 30rpx;
  position: fixed;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}

// tap栏
.dbox2 {
  overflow-y: scroll;
}

.dbox {
  -webkit-animation-name: fadeIn;
  /*动画名称*/
  -webkit-animation-duration: 0.3s;
  /*动画持续时间*/
  -webkit-animation-iteration-count: 1;
  /*动画次数*/
  -webkit-animation-delay: 0s;
  /*延迟时间*/
  margin: 30rpx 10px 10px;
  overflow: hidden;

  .swcard {
    background-color: #f2f2f2;

    .swtop {
      height: 70rpx;
      line-height: 70rpx;
      border-bottom: 1px solid #ededed;
      background-color: #ffffff;
      border-radius: 20rpx 20rpx 0 0;
      padding: 10rpx;

      .bl {
        font-size: 33rpx;
        font-weight: bold;
        float: left;
      }

      .bmain {
        float: left;
        height: 46rpx;
        width: 120rpx;
        line-height: 46rpx;
        text-align: center;
        background: url(@/static/img/orgin_aa.png) no-repeat;
        color: #ffffff;
        padding-right: 6rpx;
        margin-top: 10rpx;
        font-size: 26rpx;
        zoom: 0.8;
      }

      .b1 {
        background: url(@/static/img/yellow_aa.png) no-repeat;
      }

      .b2 {
        background: url(@/static/img/green_aa.png) no-repeat;
      }

      .br {
        color: #cbcbcb;
      }
    }

    .swdown {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 20rpx;
      background-color: #ffffff;
      border-radius: 0 0 20rpx 20rpx;
      padding: 10rpx;
    }
  }
}

.edits {
  padding: 20rpx;
  color: #ffffff;
  line-height: 20rpx;
  border-radius: 10rpx;
  background-color: #18c7e1;
  width: 270rpx;
  text-align: center;
}

.del {
  margin-top: 20rpx;
  padding: 20rpx;
  color: #ffffff;
  background-color: #fd6666;
  line-height: 20rpx;
  border-radius: 10rpx;
  width: 270rpx;
  text-align: center;
}

.iconbox {
  margin: 66rpx 36rpx;
}

.edit {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #84e1ef;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10%;
  bottom: 20%;
  z-index: 1111;
}

.card {
  -webkit-animation-name: fadeIn;
  /*动画名称*/
  -webkit-animation-duration: 0.3s;
  /*动画持续时间*/
  -webkit-animation-iteration-count: 1;
  /*动画次数*/
  -webkit-animation-delay: 0s;
  /*延迟时间*/
  margin: 14rpx;

  .qiun {
    padding-top: 40rpx;
    background-color: #ffffff;
    height: 70vh;
    // margin: 0 auto;
    // padding: 0;

    .sli {
      padding: 20rpx;

      .le {
        width: 20rpx;
        height: 20rpx;
        display: inline-block;
        border-radius: 50%;
        background-color: #1890ff;
        margin: 0 20rpx 0 5rpx;
      }

      .rl {
        margin-left: 60rpx;
        background-color: #ffe02e;
      }
    }

    .jlu {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
    }

    ul.jlu li {
      margin: 10rpx 0;
      width: 49%;

      .bt {
        font-size: 12px;
        color: #b4b8d2;
        margin-bottom: 30rpx;
      }

      .num {
        font-size: 36rpx;
        color: #ffe02e;
        font-weight: bold;
      }

      .zc {
        color: #1890ff;
      }

      .num span {
        font-size: 8px;
        font-weight: normal;
      }
    }
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    /*初始状态 透明度为0*/
  }

  50% {
    opacity: 0;
    /*中间状态 透明度为0*/
  }

  100% {
    opacity: 1;
    /*结尾状态 透明度为1*/
  }
}

.qiun-charts {
  height: 500upx;
  overflow-x: scroll;
}

.charts {
  height: 500upx;
}

.btns {
  float: right;
  font-size: 40rpx;
  color: #84e1ef;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
  .swtop,
  .swdown {
    background-color: #38383c !important;
    color: #ccc !important;
  }
  .qiun {
    background-color: #1b1c1e !important;
    color: #ccc !important;
  }
}
</style>